<!-- 会员档案 -->
<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button icon="el-icon-search" type="primary" @click="searchHandle">查询</el-button>
      <el-button icon="el-icon-delete" type="primary" @click="searchReset">清空</el-button>
      <el-button icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      <el-button type="primary" @click="mergePersonHandle">合并</el-button>
    </el-button-group>
    <el-form inline :model="dataForm" @keyup.enter.native="searchHandle">
      <el-form-item label="姓名">
        <el-input v-model="dataForm.name"></el-input>
      </el-form-item>
      <el-form-item label="就诊卡号">
        <el-input v-model="dataForm.cardNum"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="dataForm.telPhone"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="dataForm.certificateNum"></el-input>
      </el-form-item>
      <el-form-item label="ID号">
        <el-input v-model="dataForm.uniqueCode"></el-input>
      </el-form-item>
    </el-form>
    <div class="avue-crud">
      <el-table :data="dataList"  border v-loading="dataListLoading" :max-height="tableHeight" @sort-change="sortChangeHandle" @selection-change="handleSelectionChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名" width="80" :sortable="'custom'">
          <template slot-scope="scope">
            <el-button type="text" @click="getPersonCheckList(scope.row)">{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="50">
          <template slot-scope="scope">
            <span v-if="scope.row.gender == '0'">男</span>
            <span v-if="scope.row.gender == '1'">女</span>
          </template>
        </el-table-column>
        <el-table-column prop="cardNum" label="就诊卡号"></el-table-column>
        <el-table-column prop="telPhone" label="联系方式"></el-table-column>
        <el-table-column column-key="birth_day" prop="birthDay" label="出生年月" :sortable="'custom'"></el-table-column>
        <el-table-column prop="uniqueCode" label="编号"></el-table-column>

        <el-table-column label="人员操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column label="建档操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="putOnRecordHandle(scope.row)">建档</el-button>
            <el-button type="text" @click="print_opt(scope.row.id)">报告单</el-button>
            <!-- <el-button type="text" icon="el-icon-delete">图表</el-button> -->
          </template>
        </el-table-column>
        <el-table-column label="角塑操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="firstVisitHandle(scope.row.id)">初诊</el-button>
            <el-button type="text" @click="againVisitHandle(scope.row.id)">复诊</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next"></el-pagination>
    </div>

    <put-record v-if="recordVisible" ref="recordDialog"></put-record>
    <first-visit v-if="firstVisible" ref="firstDialog"></first-visit>
    <!-- 弹窗, 新增 / 修改 -->
    <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    <merge-form v-if="mergeVisible" ref="mergeDialog" @refreshData="searchHandle"></merge-form>
    <check-record v-if="checkVisible" ref="checkDialog"></check-record>
  </div>
</template>

<script>
  import { mapGetters } from "vuex"
  import { fetchCustomerList, delCustomerObj } from "@/api/eims/customer"
  import { fetchPersonList, delPersonObj, mergePersonMessage } from '@/api/pvm/person'

  import PutRecord from '@/views/pvm/arcoptometry/form'
  import FirstVisit from '@/views/pvm/ckCorneal/form'
  import TableForm from './form'
  import MergeForm from './MergeForm'
  import CheckRecord from './CheckRecord'


  export default {
    data() {
      return {
        dataForm: {
          key: ""
        },
        dataList: [],
        column:"",
        asc:true,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        multipleSelection: [],
        dataListLoading: false,

        recordVisible: false,
        firstVisible: false,
        addOrUpdateVisible: false,
        mergeVisible: false,
        checkVisible: false
      };
    },
    components: {
      PutRecord,
      FirstVisit,
      TableForm,
      MergeForm,
      CheckRecord
    },
    created() {
      this.getDataList()
    },
    computed: {
      ...mapGetters(["permissions", "userInfo"]),
      tableHeight: function() {
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize,
          column: this.column,
          asc:this.asc
        };
        let params2 = this.filterParams(this.dataForm);
        this.dataListLoading = true;
        fetchPersonList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id);
        });
      },
      // 删除
      deleteHandle(id) {
        this.$confirm("是否确认删除ID为" + id, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delCustomerObj(id);
        }).then(response => {
          if(response.data.code == '0'){
            this.$message.success("删除成功")
            this.getDataList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 搜索清空
      searchReset() {
        for (let key in this.dataForm) {
          this.dataForm[key] = "";
        }
      },
      // 查看会员信息详情
      checkCustomerDetail(id) {
        this.customerDetailVisible = true;
        this.$nextTick(() => {
          this.$refs.customerDetail.init(id, "会员详细");
        });
      },
      // 查看顾客检查信息列表
      getPersonCheckList(data){
        this.checkVisible = true
        this.$nextTick(() => {
          this.$refs.checkDialog.init(data)
        })
      },
      // 建档
      putOnRecordHandle(row) {
        this.recordVisible = true
        this.$nextTick(() => {
          this.$refs.recordDialog.init('edit', '', '三维检查', '', row.id)
        })
      },
      // 打印报告单
      print_opt(id) {
        let routeUrl = this.$router.resolve({
          path: "/report",
          query: {
            id: id
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      // 初诊
      firstVisitHandle(id) {
        this.firstVisible = true
        this.$nextTick(() => {
          this.$refs.firstDialog.init('', 1, '常规检查', '', id)
        })
      },
      againVisitHandle(id) {
        this.firstVisible = true
        this.$nextTick(() => {
          this.$refs.firstDialog.init('', 2, '常规检查', '', id)
        })
      },
      sortChangeHandle(column){
        let asc = ''
        if(column.order != null){
          if(column.order == 'ascending'){
            asc = true
          }else if(column.order == 'descending'){
            asc = false
          }
        }

        this.column = column.column.columnKey || column.prop
        this.asc=asc
        this.searchHandle()
      },
      handleSelectionChange(val){
        this.multipleSelection = val
      },
      mergePersonHandle(){
        this.mergeVisible = true
        this.$nextTick(() => {
          this.$refs.mergeDialog.init(this.multipleSelection)
        })
      }
    }
  }
</script>
